<template>
	<div class="lottery-list table-theme">
		<head-title title="营销--大转盘列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="statusList"
						:value="status"
						placeholder="上下架"
						type="status"
						@value="setSelectValue"
					>
					</select-view>
				</div>
				<div class="menu-right"> 
					<refresh-button @refresh="refreshPage"></refresh-button>
					 <search-view
                            :option="searchOption"
                            @value="goSearch"
                            @clear="refreshPage"
                        ></search-view>
					<div class="add"><el-button type="primary" @click="onOperation('add')">添加活动</el-button></div>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="lotteryList">
				<el-table-column label="序号" align="center" prop="lottery_id"></el-table-column>
				<el-table-column label="标题" align="center" prop="title"></el-table-column>
				<el-table-column label="扣除的积分/次数" align="center" prop="kouchujifen"> </el-table-column>
				<el-table-column label="一等奖" align="center" prop="first"></el-table-column>
				<el-table-column label="二等奖" align="center" prop="second"></el-table-column>
				<el-table-column label="三等奖" align="center" prop="third"></el-table-column>
				<el-table-column label="四等奖" align="center" prop="four"></el-table-column>
				<el-table-column label="五等奖" align="center" prop="five"></el-table-column>
				<el-table-column label="六等奖" align="center" prop="six"></el-table-column>
				<el-table-column label="七等奖" align="center" prop="seven"></el-table-column>
				<el-table-column label="八等奖" align="center" prop="eight"></el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event,scope.row.lottery_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="开始时间" align="center" prop="start_time"></el-table-column>
				<el-table-column label="结束时间" align="center" prop="end_time"></el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="160">
					<template slot-scope="scope">
						<el-button type="primary" style="marginBottom:10px" size="mini" @click="onOperation('details',scope.row.lottery_id)">详情</el-button>
						<el-button type="primary" style="marginBottom:10px" size="mini" @click="onOperation('edit',scope.row.lottery_id)">编辑</el-button>
						<el-button type="primary" style="marginBottom:10px" size="mini" @click="onOperation('list',scope.row.lottery_id)">获奖名单</el-button>
						<el-button type="danger" style="marginBottom:10px" size="mini" @click="onOperation('del',scope.row.lottery_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>
	</div>
</template>

<script>
import AwardList from "@/components/layer-dialog/activity/award_list.vue" 
import ActivityDetails from "@/components/layer-dialog/activity/activity_details.vue"
import SelectView from "@/components/SelectView";
export default {
	components: {
        AwardList,
		ActivityDetails,
		SelectView
	},
	data() {
		return {
			searchContent:'',
			title: '添加分类',
			submitType: '', // 提交的类型 0 增加 1编辑
			imageUrl: '',
			addDialog: false,
			lotteryList: [],
			total: 0,
			status: 1,
			statusList: [
				{
					value: 1,
					label: '上架'
				},
				{
					value: 2,
					label: '下架'
				}
			],
			page: 0,
            classSelect:"",
            selectContent:"",
            searchOption:[
				{
					value: 0,
					label: '序号'
				},
                {
                    value:1,
                    label:"标题"
                }
            ]
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				status: this.status
			};
			if (this.classSelect == 0) {
				data.lottery_id = this.selectContent;
			}else if(this.classSelect == 1){
                data.keyword = this.selectContent;
            }
			this.$http(this.$ApiList.LotteryList, data).then(res => {
				this.lotteryList = res.datas.list;
				this.total = res.datas.count;
			});
		},

		// 上下架
		upDown(status,lottery_id) {
			let data = {
				status,
				lottery_id
			};
			this.$http(this.$ApiList.LotteryDown, data).then(res => {
				this.$layer.msg('操作成功');
				this.init(this.page);
			});
		},
		// 增加分类
		add() {
			this.title = '添加活动';
			this.addDialog = true;
		},
        // 清除条件
        refreshPage(){
			this.status = 1;
			this.classSelect = 0;
			this.selectContent = "";
			this.init(1);
        },
        goSearch(classSelect,selectContent){
            this.classSelect = classSelect;
            this.selectContent = selectContent;
            this.init(1);
        },
        onOperation(type,lottery_id){
            switch (type) {
				case "add":
					this.$layer.iframe({
						title:"添加活动",
						maxmin:true,
						area:['70%','60%'],
						content:{
							content:ActivityDetails,
							parent:this,
							data:{
								type
							}
						}
					})
					break;
                case "details":
                    this.$layer.iframe({
						title:"活动详情",
						maxmin:true,
						area:['70%','60%'],
						content:{
							content:ActivityDetails,
							parent:this,
							data:{
								lottery_id,
								type
							}
						}
					})
                    break;
                case "edit":
					this.$layer.iframe({
						title:"编辑活动",
						maxmin:true,
						area:['70%','60%'],
						content:{
							content:ActivityDetails,
							parent:this,
							data:{
								lottery_id,
								type
							}
						}
					})
                    break;
                case "del":
					this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$http(this.$ApiList.LotteryDel,{lottery_id}).then(res=>{
							this.$message.success(res.datas);
							this.init(this.page);
						})
					})
					.catch(() => {});
                    break;
                case "list":
                    this.$layer.iframe({
                        title:"获奖名单",
                        maxmin:true,
                        area:['70%','60%'],
                        content:{
                            content:AwardList,
                            parent:this,
                            data:{
                                lottery_id,
								type
                            }
                        }
                    })
                    break;
                default:
                    break;
            }
        },
		setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'status':
						this.status = value
						break;
				
					default:
						break;
				}
				this.init()
			}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>
.lottery-list{

}

</style>
